<template>
  <div class="">
    <TableForm
      :model-data="modelData"
      :data="formData"
      @onSearch="onSearch"
      @onReset="onReset"
    />
    <TablePublic
      :is-index="true"
      :reset-table="resetTable"
      :params="params"
      :table-api="tableApi"
      :columns="columns"
      :toolData="toolData"
      @onToolClick="onToolClick"
      @onBtnClick="onBtnClick"
      @paginaOnChange="paginaOnChange"
    >
      <template v-slot:typeNames="data">
        <div>
          {{ renderTypeNames(data.item) }}
        </div>
      </template>
    </TablePublic>

    <CreateModal
      v-if="createVisible"
      :visible="createVisible"
      @onHide="createOnHide"
      @onOk="createOnOk"
      :item="currentItem"
    />
  </div>
</template>

<script>
import TableForm from "@/components/TableForm/index.vue";
import TablePublic from "@/components/TablePublic/index.vue";
import CreateModal from "./CreateModal.vue";
import { getEquipmentList, delEquipmentItem } from "@/api/equipment.js";
export default {
  components: {
    TableForm,
    TablePublic,
    CreateModal,
  },
  data() {
    return {
      currentItem: {},
      toolData: [
        {
          label: "新增",
          type: "add",
          per: "maintain_add",
        },
      ],
      modelData: {},
      formData: [
        {
          type: "input",
          name: "name",
          label: "设备名称",
          placeholder: "请输入设备名称",
        },
        {
          type: "input",
          name: "brandName",
          label: "品牌名称",
          placeholder: "请输入品牌名称",
        },
        {
          type: "input",
          name: "typeName",
          label: "类型名称",
          placeholder: "请输入类型名称",
        },
      ],
      columns: [
        {
          label: "操作",
          prop: "handle",
          width: "120",
          buttons: [
            {
              label: "编辑",
              type: "edit",
            },
            {
              label: "删除",
              type: "del",
              color: "red",
            },
          ],
        },
        {
          label: "设备名称",
          prop: "name",
        },
        { label: "型号名称", prop: "modelCode" },
        { label: "品牌名称", prop: "brandName" },
        { label: "类型", prop: "typeNames", slot: "typeNames", width: "200" },
        { label: "价格", prop: "price" },
        { label: "上市时间", prop: "produceTime", width: "150" },
        { label: "所属经销商", prop: "counsellorName", width: "150" },
        { label: "经销商联系方式", prop: "counsellorPhone", width: "150" },
      ],
      tableApi: getEquipmentList,
      resetTable: false,
      params: {
        pageSize: 10,
        page: 1,
      },
      createVisible: false,
    };
  },
  methods: {
    onSearch() {
      this.params = {
        ...this.params,
        ...this.modelData,
        page: 1,
      };
      this.getData();
    },
    onReset() {},
    onToolClick(data) {
      const { type } = data;
      this.btnType = type;
      switch (type) {
        case "add":
          this.createVisible = true;
          break;
        default:
          break;
      }
    },
    onBtnClick(data) {
      const { btn, item } = data;
      const { type } = btn;
      if (type == "edit") {
        this.createVisible = true;
        this.currentItem = item;
      } else if (type == "del") {
        const { id } = item;
        delEquipmentItem({
          ids: [id],
        }).then((res) => {
          this.getData();
          this.$message.success("删除成功");
        });
      }
    },
    paginaOnChange(data) {
      const { limit, page } = data;
      this.params = {
        ...this.params,
        page,
        pageSize: limit,
      };
      this.getData();
    },
    getData() {
      this.resetTable = !this.resetTable;
    },
    createOnOk() {
      this.createOnHide();
      this.getData();
    },
    createOnHide() {
      this.createVisible = false;
      this.currentItem = {};
    },
    renderTypeNames(item) {
      const { typeName, typeNames } = item;
      console.log(typeNames);
      if (typeNames && Array.isArray(typeNames) && typeNames.length) {
        return typeNames.map((name) => name).join("、");
      }
      return typeName;
    },
  },
};
</script>
<style scoped lang="scss"></style>
